<template>
	<div id="ToolsIndex">
		<el-row>
			<el-col :span="8" v-for="item in items" :key="o" offset="2" style="padding:10px">
				<el-card :body-style="{ padding: '0px' }">
					<i :class="item.icon"></i>
					<div style="padding: 14px;">
						<span>{{item.title}}</span>
						<div class="bottom clearfix">
							<time class="time">{{item.content }}</time>
							<el-button type="text" class="button"  @click="toolslink(item)">进入...</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				items: [{
						icon: 'el-icon-star-off',
						index: 'QRcodeGeneration',
						title: '条码/二维码生成',
						content: "将文字转化为条码和二维码,方便快速生成条码"
					},
					{
						icon: 'el-icon-star-off',
						index: 'WordsNumber',
						title: '字数统计',
						content: "统计输入字符串的文字字符长度！"
					}, {
						icon: 'el-icon-star-off',
						index: 'Base64Encoding',
						title: 'Base64编码/解码',
						content: "将文字进行Base64编码或解码"
					},
					{
						icon: 'el-icon-star-off',
						index: 'Md5Encryption',
						title: 'MD5加密',
						content: "将文字进行MD5加密"
					},
					{
						icon: 'el-icon-star-off',
						index: 'SqlCodeFormat',
						title: 'sql代码格式化',
						content: "整理sql语句格式！"
					}, {
						icon: 'el-icon-star-off',
						index: 'JsonCodeFormat',
						title: 'JSON格式化',
						content: "整理JSON格式"
					}, {
						icon: 'el-icon-star-off',
						index: 'NumMoney',
						title: '数字转大写金额',
						content: "将数字转换为金额"
					}
				]
			};
		},
		methods: {
			toolslink(item) {
				this.$router.push({
					path: item.index,
					name: item.index
				})
			}
		}
	}
</script>

<style>
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
